<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制圆型</title>
</head>
<body>
    <canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto">
        当前浏览器不支持canvas，请更换浏览器再试
    </canvas>

    <script>
        window.onload = function () {
            var canvas = document.getElementById('canvas');
            canvas.width = 1024;
            canvas.height = 770;

            var context = canvas.getContext('2d');

            context.lineWidth = 5;
            context.strokeStyle = '#058';

            //绘制一笔
            //context.arc(300,300,200,0,1.5*Math.PI);
            //context.arc(300, 300, 200, 0, 1.5 * Math.PI,true);
            //context.arc(300, 300, 200, 0, 0.5 * Math.PI,true);
            //context.stroke();

            //绘制多笔
            for(var i = 0; i < 10;i++){
                context.beginPath();
                context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);
                context.closePath();//在绘制多个图形时，如果图形没有闭合，会自动闭合图形
                context.stroke();
            }

            for (var i = 0; i < 10; i++) {
                context.beginPath();
                context.arc(50 + i * 100, 180, 40, 0, 2 * Math.PI * (i + 1) / 10);
                context.stroke();
            }

            for (var i = 0; i < 10; i++) {
                context.beginPath();
                context.arc(50 + i * 100, 300, 40, 0, 2*Math.PI * (i + 1)/10 , true);
                context.closePath();
                context.stroke();
            }

            for (var i = 0; i < 10; i++) {
                context.beginPath();
                context.arc(50 + i * 100, 420, 40, 0, 2 * Math.PI * (i + 1) / 10, true);
                context.stroke();
            }

            context.fillStyle = '#058';
            for (var i = 0; i < 10; i++) {
                context.beginPath();
                context.arc(50 + i * 100, 540, 40, 0, 2 * Math.PI * (i + 1) / 10);
                context.closePath();//有无closePath对于fill填充无效
                context.fill();
            }

            for (var i = 0; i < 10; i++) {
                context.beginPath();
                context.arc(50 + i * 100, 660, 40, 0, 2 * Math.PI * (i + 1) / 10);
                context.fill();
            }
            
        }
    </script>
</body>
</html>